<template>
  <div style="position:relative">
  <div class="pagetitle ">标签</div>
  <div class="pageSecondtitle ">共：{{count}} 个</div>

    <!-- 标签列表 -->
  <div class="tag-body tag-change">    

    <router-link
          :style="{ 'font-size': Math.floor(Math.random() * 15) + 18 + 'px' }"
          v-for="item of tagList"
          :key="item.id"
          :to="'/tags/' + item.id"
        >
        {{ item.tagName }}
        </router-link>
      <!-- <tag-cloud :data="tagListName" @clickTag="clickTagItem" style=""></tag-cloud> -->
  </div>

  </div>
</template>

<script>
export default {
  created() {
    this.listTags();
  },
  data: function() {
    return {
      tagList: [],
      count: 0,
    };
  },
  methods: {

    listTags() {
      this.axios.get("/tags").then(({ data }) => {
        // data.data.recordList(item=>{
        //     item.name =item.tagtagName
        // });
        this.tagList = data.data.recordList;
        this.count = data.data.count;
      });
    }
  },
  computed: {
  }
};
</script>

<style scoped>
.tag-body{
  display:flex;
  flex-direction:row;
  width:35vh;
  flex-wrap:wrap;
  justify-content:space-around;
  margin:40px auto;
  gap: 10px;
}
.tagword{
  background: rgb(223, 223, 223);
}
.tag-change  a:hover {
  background: #FF3B00;
    color: aliceblue;
  transform: scale(1.1);
}
</style>